<template>
    <div 
        class="resize-handle" 
        @mousedown="$emit('start-resize', $event)" 
        @touchstart="$emit('start-resize', $event)" 
        @dblclick="$emit('reset-width')"
        :class="{ 'resizing': isResizing }"
    >
        <div class="resize-indicator"></div>
        <div v-if="sidebarWidth < minWidth" class="resize-tip">
            <span>双击重置</span>
        </div>
    </div>
</template>

<script setup>
defineProps({
    sidebarWidth: {
        type: Number,
        default: 380
    },
    minWidth: {
        type: Number,
        default: 320
    },
    isResizing: {
        type: Boolean,
        default: false
    }
});

defineEmits(['start-resize', 'reset-width']);
</script>

<style lang="less" scoped>
// 拖拽分隔线
.resize-handle {
    width: 2px;
    background: transparent;
    cursor: col-resize;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    z-index: 10;
    flex-shrink: 0; // 防止被压缩

    &:hover {
        background: var(--border-light);
    }

    &.resizing {
        background: var(--primary-color);
        cursor: col-resize;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
    }

    // 拖拽指示器
    .resize-indicator {
        width: 2px;
        height: 40px;
        background: var(--border-color);
        border-radius: 1px;
        transition: all 0.2s ease;
    }

    &:hover .resize-indicator,
    &.resizing .resize-indicator {
        background: var(--primary-color);
        width: 3px;
        height: 50px;
    }

    // 拖拽提示
    .resize-tip {
        position: absolute;
        top: 50%;
        left: 12px;
        transform: translateY(-50%);
        background: var(--warning-color);
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 11px;
        white-space: nowrap;
        opacity: 0.9;
        pointer-events: none;
        z-index: 20;
    }
}
</style>
